<template>
    <div class="header">
        <div>
            <el-row>
                <el-col :span="3">
                    <div class="tc">
                        <img src="@/assets/images/logo_black.png" class="logo" alt="logo" @click="goHome">
                    </div>
                </el-col>
                <el-col :span="13">
                    <div class="cf">
                        <ul class="guide-middle cf">
                            <li>
                                <router-link tag="a" to='/layout/index'>首页</router-link>
                            </li>
                            <li>
                                <router-link tag="a" to='/inventory'>实时盘点</router-link>
                            </li>
                            <li>
                                <router-link tag="a" to='/location'>定位查找</router-link>
                            </li>
                            <li>
                                <router-link tag="a" to='/security'>安全管理</router-link>
                            </li>
                            <li>
                                <router-link tag="a" to='/statistics'>数据统计</router-link>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="7" :offset="1">
                    <div class="cf">
                        <ul class="guide-right fr cf">
                            <li>
                                <router-link tag="a" to='/news'>消息中心</router-link>
                                <span class="msg-count tc">0</span>
                                <!--<el-badge :value="100" :max="10" class="item">-->
                                <!--<router-link tag="a" to='/news'>消息中心</router-link>-->
                                <!--</el-badge>-->
                            </li>
                            <li>
                                <router-link tag="a" to='/company'>公司资料</router-link>
                            </li>
                            <li><a href="javascript:void(0)" @click="updatePwd">修改密码</a></li>
                            <li><a href="javascript:void(0)" @click="loginOut">退出</a></li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="header-bottom"></div>
        <!--修改密码-->
        <el-dialog
            title="修改密码"
            :visible.sync="updatePwdVisible"
            style="line-height: normal;"
            width="30%">
            <div class="content">
                <ul>
                    <li>
                        <label>
                            <input type="password" placeholder="旧密码" v-model="oldPwd">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="password" placeholder="新密码" v-model="newPwd">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="password" placeholder="再次确认新密码" v-model="testPwd">
                        </label>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" class="dialog-big-button"
                               @click="updatePwdConfirm">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "vHeader",
        data() {
            return {
                updatePwdVisible: false,
                oldPwd: "",
                newPwd: "",
                testPwd: "",
            }
        },
        methods: {
            goHome() {
                this.$router.push({path: '/layout/index'})
            },
            loginOut() {
                this.$alert('是否退出登录？', '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    closeOnClickModal: true,
                    confirmButtonClass: 'dialog-big-button',
                }).then(() => {
                    let params = {account: ""}
                    if (localStorage.getItem("user")) {
                        params.account = JSON.parse(localStorage.getItem("user")).account
                    }
                    this.$ajax.autoService
                        .logout(params)
                        .then((res) => {
                            let result = res.data
                            if (result.code === 200) {
                                this.$router.push({path: '/login'})
                                localStorage.removeItem('user')
                            } else {
                                this.$message.error(result.msg)
                            }
                        }, () => {
                            this.$message.error(this.$msgDictionary.serviceException)
                        })
                }).catch(() => {

                })
            },
            updatePwd() {
                this.updatePwdVisible = true
                this.oldPwd = ""
                this.newPwd = ""
                this.testPwd = ""
            },
            /**
             * 修改密码确认按钮
             */
            updatePwdConfirm() {
                if (this.oldPwd.trim() === "") {
                    this.$message.error(this.$msgDictionary.pwd.oldEmpty)
                    return
                }
                if (this.newPwd.trim() === "") {
                    this.$message.error(this.$msgDictionary.pwd.newEmpty)
                    return
                }
                if (this.oldPwd === this.newPwd) {
                    this.$message.error(this.$msgDictionary.pwd.repeated)
                    return
                }
                let reg = /^[0-9A-Za-z]{6,20}$/
                if (!reg.test(this.newPwd)) {
                    this.$message.error(this.$msgDictionary.pwd.format)
                    return
                }
                if (this.newPwd !== this.testPwd) {
                    this.$message.error(this.$msgDictionary.pwd.different)
                    return
                }
                let params = {
                    account: "",
                    oldPassword: this.oldPwd,
                    newPassword: this.newPwd,
                }
                if (localStorage.getItem("user")) {
                    params.account = JSON.parse(localStorage.getItem("user")).account
                } else {
                    this.$message.error('服务器异常，请重新登录！')
                    let timer = setTimeout(() => {
                        clearTimeout(timer)
                        this.$router.push({path: '/login'})
                    }, 1500)
                    return
                }
                this.$ajax.accountData
                    .updatePwd(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.update.suc)
                            this.updatePwdVisible = false
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        },
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/color";

    .header {
        height: 10vh;
        line-height: 9vh;
        .logo {
            width: 1.6rem;
        }
        li {
            float: left;
            font-size: 0.2rem;
        }
        .guide-middle {
            padding-left: 1rem;
            li {
                width: 1.6rem;
                text-align: center;
                a {
                    color: $black;
                    &.router-link-active, &:hover {
                        color: $strong_red;
                    }
                }
            }
        }
        .guide-right {
            li {
                font-size: 0.14rem;
                width: 0.8rem;
                text-align: left;
                white-space: nowrap;
                position: relative;
                .item {
                    height: 20px;
                    vertical-align: top;
                    .el-badge__content {
                        top: 0.26rem;
                    }
                }
                a {
                    color: $ph_color;
                    &:hover {
                        color: $HoverC;
                    }
                }
                .msg-count {
                    background: $strong_red;
                    height: 14px;
                    width: 20px;
                    border-radius: 6px;
                    color: $white;
                    position: absolute;
                    top: 30%;
                    right: 10%;
                    z-index: -1;
                    line-height: 14px;
                }
            }
        }
        .header-bottom {
            width: 100%;
            height: 0.11rem;
            background: $strong_red;
        }
        .el-dialog {
            .content {
                li {
                    float: none;
                }
            }
        }
    }
</style>
